import { forwardRef, useImperativeHandle, useState } from 'react';

import { useAntdTable, useRequest } from 'ahooks';
import { Drawer, Form, Table } from 'antd';

import Filter from '@/components/filter';

import { TimeSort } from '@/enum';
import { proShiftTeamGet } from '@/services/bizApi/shengchanbanzujiekou';
import { proShiftTeamUserPage } from '@/services/bizApi/shengchanbanzurenyuanjiekou';

/** 该模块增删改查对象 */
export type BizObject = BIZAPI.ProShiftTeamUserEntity;

type EditOpenBaseArgs = {
  rowData?: BIZAPI.ProShiftScheduleCalendarEntity;
};

export type PersonalRef = {
  open: (arg: EditOpenBaseArgs & { teamId?: string }) => void;
};

export type EditProps = {};

const Personal: React.ForwardRefRenderFunction<PersonalRef, EditProps> = (_, ref) => {
  const [form] = Form.useForm();
  const [args, setArgs] = useState<ArgumentsType<PersonalRef['open']>[0]>();
  const [filter] = Filter.useForm();
  const [open, setOpen] = useState(false);

  const teamInfo = useRequest(
    async () => {
      if (!args?.rowData?.teamId) return;
      const res = await proShiftTeamGet({ id: args?.rowData?.teamId as unknown as string });

      return res?.data;
    },
    {
      refreshDeps: [args?.rowData?.teamId]
    }
  );

  const table = useAntdTable(
    async ({ current, pageSize }, { id, ...formData }) => {
      const res = await proShiftTeamUserPage({
        ...formData,
        ...id,
        teamId: args?.rowData?.teamId,
        page: current,
        size: pageSize,
        timeSort: TimeSort.倒序
      });

      return {
        list: res.data?.records || [],
        total: res.data?.total || 0
      };
    },
    {
      form: filter
    }
  );

  useImperativeHandle(ref, () => {
    return {
      open: (arg) => {
        setArgs(arg);
        setOpen(true);
        table.search.submit();
      }
    };
  });

  const onCancel = () => {
    setOpen(false);
  };

  return (
    <Drawer
      title={`${args?.rowData?.teamName}成员列表`}
      // extra={
      //   <Space>
      //     <Button type="primary" onClick={onSave}>
      //       保存
      //     </Button>
      //     <Button onClick={onCancel}>取消</Button>
      //   </Space>
      // }
      width="50%"
      open={open}
      onClose={onCancel}
    >
      <div
        style={{
          marginBottom: '10px'
        }}
      >
        班组组长: {teamInfo?.data?.leaderName}
      </div>
      {/* 表格 */}
      <Table<BizObject>
        size="small"
        columns={[
          {
            title: '序号',
            key: 'index',
            width: 50,
            render: (text, row, index) => index + 1
          },
          {
            title: '成员姓名',
            dataIndex: 'userName'
          }
        ]}
        scroll={{
          x: 'max-content'
        }}
        rowKey="id"
        bordered
        {...table.tableProps}
        pagination={{
          ...table.tableProps.pagination,
          showTotal: (total) => `共 ${total} 条`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100']
        }}
      />
      {/* end表格 */}
    </Drawer>
  );
};

export default forwardRef(Personal);
